<template>
  <section :key="r" class="rst-list_container">
    <template v-if="cList.length > 0">
      <div class="restaurant" v-for="(item, index) in cList" :key="index" @click="goShopCommodity(item)">
        <img-format class="restaurant-img" :src="item.image_path" :size="90" />
        <div class="restaurant-r">
          <div class="flex-row-sb-center">
            <h3 class="restaurant-name ellipsis">{{item.folding_restaurant_brand?item.folding_restaurant_brand : item.name}}</h3>
            <span class="iconfont icon-gengduo" @click.stop="uninterested($event, item)"></span>
          </div>
            <div class="flex-row-sb-center">
              <p>
                  <span v-for="i in 5" :key="i" :class="['iconfont', 'icon-xingxing1-copy', i<= (Math.round(item.rating))? 'star-light' : ''] "></span>
                  <span class="ranting">{{ item.rating }}</span>
                  <span>月售{{ item.recent_order_num}}单</span>
              </p>
              <span class="delivery" v-if="item.delivery_mode">{{item.delivery_mode.text}}</span>
            </div>
          <div class="flex-row-sb-center">
            <p class="fee">
              <span>￥{{item.piecewise_agent_fee.rules[0].price}}起送</span><span class="iconfont icon-anjianfengexian"></span>
              <span>{{item.piecewise_agent_fee.description}}</span>
            </p>
            <p class="time">
              <span>{{item.distance|distanceFormat}}</span>
              <span class="iconfont icon-anjianfengexian"></span>
              <span>{{item.order_lead_time}}分钟</span>
            </p>
          </div>
          <p class="tag" v-for="tag in item.flavors">{{tag.name}}</p>
          <div class="activities" v-if="item.activities.length > 0">
            <span class="more-act" v-if="item.activities.length > 2" @click.stop="openActivities">
              {{item.activities.length}}个活动
              <span class="iconfont icon-sanjiaoxia"></span>
            </span>
            <p class="flex-item-center" v-for="act in item.activities">
              <span class="pro" :style="{backgroundColor: '#' + act.icon_color}">{{act.icon_name}}</span>
              <span class="pro-text ellipsis">{{act.description}}</span>
            </p>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="flex-col-center">
        <img width="55%" src="https://fuss10.elemecdn.com/2/50/8019fbaebac2aaa76e2d9b5e5b407gif.gif" />
        <p class="no-shop-hint">附近没有外卖商家</p>
        <p class="no-shop-text">饿了么正在以光束来到你的身边</p>
      </div>
    </template>
  </section>
</template>

<script>
import { dislikeRestaurant, getNearbyRestaurant, getCookie } from '@/api/elm-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
export default {
  name: 'rst-list',
  props: {
    list: {
      type: Array,
      default: []
    },
    to: {
      type: Function
    },
    more: {
      type: Function
    },
    remove: {
      type: Function
    }
  },
  data() {
    return {
      r: 0,
      req: {
        latitude: '',
        longitude: '',
        order_by: '',
        limit: 8,
        offset: 0
      },
      pageInfo: {
        currentPage: 1,
        currentSize: 8
      },
      flag: true,
      noMore: true
    }
  },
  components: {
    ImgFormat
  },
  created() {
    const { latitude, longitude } = JSON.parse(window.sessionStorage.getItem('Geo'))
    this.req.latitude = latitude
    this.req.longitude = longitude
  },
  methods: {
    openActivities(e) {
      e.target.parentNode.classList.toggle('auto-height')
    },
    uninterested(e, item) {
      let un =  document.getElementById('uninterested')
      if(un) {
        un.parentNode.removeChild(un)
        this.uninterested(e)
      }else {
        const rootEle = e.target.parentNode.parentNode.parentNode
        un = document.createElement('div')
        un.id = 'uninterested'
        un.style.top = rootEle.offsetTop + 'px'
        un.style.left = rootEle.offsetLeft + 'px'
        un.style.height = rootEle.offsetHeight + 'px'
        un.style.width = rootEle.offsetWidth + 'px'
        un.classList.add('absolute')
        un.addEventListener('click', ev => {
          ev.stopPropagation()
          ev.preventDefault()
          un.parentNode.removeChild(un)
        })
        const btn = document.createElement('button')
        btn.innerText = '不喜欢'
        btn.classList.add('circle-btn')
        btn.addEventListener('click', async () => {
          const { data } = await dislikeRestaurant(item.id, window.sessionStorage.getItem('USER_ID'))
          if(data) {
            const a = this.list.findIndex(arr => {
              return arr.id === item.id
            })
            this.list.splice(a, 1)
            this.$toast('该商家将会最后展示')
          }
        })
        un.appendChild(btn)
        document.body.appendChild(un)
      }
    },
    async goShopCommodity(item) {
      if(item.type === 0) {
        this.$router.push({ name: 'shopcommodity1', query: {
          shopId: item.id,
          is_session: true
        }})
      }else if(item.type === 1) {
        const { data: { data: { cookies} } } = await getCookie()
        cookies.forEach(item => {
          document.cookie = item.name + '=' + item.value + ';'
        })
        this.$router.push({ name: 'shopcommodity2', query: {
          shopId: item.id,
          is_session: true
        }})
      }
    }
  },
  computed: {
    cList() {
      this.list.forEach((item, index) => {
        if(item.restaurant) {
          this.list[index] = item.restaurant
        }
      })
      this.r = Math.random()
      return this.list
    }
  },
  mounted() {
    const restaurantLastChild = document.querySelector('.rst-list_container')?.lastElementChild
    const uninterested = document.getElementById('uninterested')
    restaurantLastChild && (restaurantLastChild.onclick = e => {
      uninterested && uninterested.parentNode.removeChild(uninterested)
    })
    window.addEventListener('scroll', async () => {
      uninterested && uninterested.parentNode.removeChild(uninterested)
      if(this.flag && restaurantLastChild && ((window.scrollY + window.innerHeight) > restaurantLastChild.offsetTop)) {
        this.flag = false
        this.req.offset = this.pageInfo.currentPage * this.pageInfo.currentSize
        this.pageInfo.curentPage ++
        const { data : { items } } = await getNearbyRestaurant(this.req)
        if(items && items.length > 0) {
          this.noMore = false
          items.forEach(item => {
            this.list.push(item)
          })
          this.flag = true
        }else {
          this.flag = false
          this.noMore = true
        }
      }
    })

  },
  updated() {
    this.flag = true
  }
}
</script>

<style scoped lang="less">
  .rst-list_container {
    width: 100%;
  }
  .restaurant {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
  }
  .restaurant-img {
    width: 150px;
    height: 150px;
    margin: 20px;
    flex-shrink: 0;
  }
  .restaurant-r {
    box-sizing: border-box;
    width: 100%;
  }
  .restaurant-name {
    width: 400px;
    margin-bottom: 0;
    font-size: 30px;
  }
  .icon-gengduo {
    padding-right: 10px;
    font-size: 32px;
  }
  .icon-xingxing1-copy, .icon-banxing {
    font-size: 18px;
    color: #eee;
  }
  .ranting, .monly-sale {
    font-size: 24px;
    color: #6a6a6a;
  }
  .ranting {
    margin-right: 10px;
  }
  .fee, .time {
    margin: 0;
    color: #8a8a8a;
    font-size: 24px;
  }
  .time {
    margin-right: 10px;
  }
  .icon-anjianfengexian {
    font-size: 26px;
  }
  .tag {
    display: inline-block;
    margin: 10px 10px 0 0;
    padding: 1px 2px;
    border: 1px solid #ccc;
    color: #828282;
    font-size: 22px;
  }
  .pro {
    padding: 1px 2px;
    border-radius: 3px;
    color: #fff;
    font-size: 22px;
  }
  .pro-text {
    display: inline-block;
    margin-left: 20px;
    width: 420px;
    font-size: 24px;
    color: #545454;
  }
  .activities {
    position: relative;
    height: 120px;
    margin-top: 10px;
    border-top: 1px solid #eee;
    overflow: hidden;
  }
  .more-act {
    position: absolute;
    top: 20px;
    right: 10px;
    font-size: 20px;
    color: #7d7d7d;
  }
  .icon-sanjiaoxia {
    margin-left: 6px;
    color: #7d7d7d;
  }
  .auto-height {
    height: auto!important;
  }
  .no-shop-hint {
    margin-bottom: 0;
    font-size: 34px;
    color: #3d3d3d;
  }
  .no-shop-text {
    margin-top: 10px;
    font-size: 24px;
    color: #ababab;
  }
  .star-light {
    color: #e2ec70;
  }
  .delivery {
    margin-right: 10px;
    padding: 2px 4px;
    background-color: #0097FF;
    border-radius: 5px;
    color: #fff;
  }
  .no-shop-hint {
    margin-bottom: 0;
    font-size: 34px;
    color: #3d3d3d;
  }
  .no-shop-text {
    margin-top: 10px;
    font-size: 24px;
    color: #ababab;
  }
</style>
